<!--
 * @Author: your name
 * @Date: 2020-10-22 13:36:03
 * @LastEditTime: 2021-03-11 15:52:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\productDetail\index.vue
-->
<template>
  <div class="productDetail w1200auto">
    <DetailSwiper
      @showTry="showTry"
      class="mb60" />
    <Detail class="mb50" />
    <RecommendProductSwiper
      :productData="productData"
      :title="swiperTitle3"
      :swiperOption="swiperOption3"
      _class="detail"
    />
    <el-dialog title="" :visible.sync="dialogTry" width="780px" class="tryDialog">
      <try-on :initData="dialogTry" :list="bannerImgList" :glassesList="glassesList" @addHeaderPic="addHeaderPic"></try-on>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import DetailSwiper from "~/components/productDetail/DetailSwiper";
import Detail from "~/components/productDetail/Detail";
import RecommendProductSwiper from "~/components/home/ProductSwiper";
import TryOn from '~/components/common/TryOn'

export default {
  name: "productDetail",
  async asyncData({ app, store, params, query, req, res }) {
    let productData = [
      {
        child: [
          {
            color: "#db0ddb",
            final_price: 50,
            image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/p/u/purple-1_1_1_1.jpg",
            name: "Sherry-Purple-Purple",
            origin_price: "50.000000",
            sku: "Sherry-Purple-Purple",
            tier_price: 0
          },
          {
            color: "#0d0c0d",
            final_price: 60,
            image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/b/l/black-gold-1_1_2.jpg",
            name: "Sherry-Gold-Black-Gold",
            origin_price: "60.000000",
            sku: "Sherry-Gold-Black-Gold",
            tier_price: 0
          },
          {
            color: "#d9c3d9",
            final_price: 70,
            image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/b/l/black-silver-1_1_3.jpg",
            name: "Sherry-Silver-Black-Silver",
            origin_price: "70.000000",
            sku: "Sherry-Silver-Black-Silver",
            tier_price: 0
          }
        ],
        entity_id: "14",
        image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/m/a/main-small_1.jpg",
        name: "Sherry",
        price: 50,
        product_url: "https://yj2.clucl.com/sherry.html",
        type_id: "configurable",
        update_at: "2021-01-15 06:51:15"
      },
      {
        child: [
          {
            color: "#db0ddb",
            final_price: 50,
            image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/p/u/purple-1_1_1_1.jpg",
            name: "Sherry-Purple-Purple",
            origin_price: "50.000000",
            sku: "Sherry-Purple-Purple",
            tier_price: 0
          },
          {
            color: "#0d0c0d",
            final_price: 60,
            image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/b/l/black-gold-1_1_2.jpg",
            name: "Sherry-Gold-Black-Gold",
            origin_price: "60.000000",
            sku: "Sherry-Gold-Black-Gold",
            tier_price: 0
          },
          {
            color: "#d9c3d9",
            final_price: 70,
            image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/b/l/black-silver-1_1_3.jpg",
            name: "Sherry-Silver-Black-Silver",
            origin_price: "70.000000",
            sku: "Sherry-Silver-Black-Silver",
            tier_price: 0
          }
        ],
        entity_id: "14",
        image: "https://yj2.clucl.com/media/catalog/product/cache/f2ecaa54cd80eeff7b0e6a9e33232559/m/a/main-small_1.jpg",
        name: "Sherry",
        price: 50,
        product_url: "https://yj2.clucl.com/sherry.html",
        type_id: "configurable",
        update_at: "2021-01-15 06:51:15"
      }
    ];
    let swiperTitle3 = "Recommended for you";
    let pageTitle = query.id || ''
    return {
      pageTitle: pageTitle,
      productData: productData,
      swiperTitle3: swiperTitle3
    };
  },
  data() {
    var _this = this;
    return {
      swiperOption3: {
        slidesPerView: 4,
        spaceBetween: 20,
        slidesPerGroup: 4,
        preventClicks: false, //默认true
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next.detail",
          prevEl: ".swiper-button-prev.detail",
        },
        observer: true,
        observeParents: true,
        on: {
          click: function (swiper) {
            // 需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 _this，来调用 methods 里的方法
            let localName = parseInt(swiper.path[0].dataset["index"]);
            console.log('localName :>> ', localName);
            if (localName) {
              // 点击颜色切换图片轮播
              _this.switchTap(swiper);
            } else if(localName === 0) {
              // 点击添加喜欢
              _this.addFavorite(swiper);
            }
          },
        },
      },
      dialogTry: false,
      glassesList: [
        {
          id: 1,
          imgUrl: require('~/assets/image/tryGlasses/1.png')
        },
        {
          id: 2,
          imgUrl: require('~/assets/image/tryGlasses/2.png')
        },
        {
          id: 3,
          imgUrl: require('~/assets/image/tryGlasses/3.png')
        },
        {
          id: 4,
          imgUrl: require('~/assets/image/tryGlasses/4.png')
        }
      ],
      bannerImgList: [
        {
          banner_image: require("~/assets/image/tryHead/1.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/2.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/3.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/4.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/5.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/7.png")
        },
        {
          banner_image: require("~/assets/image/tryHead/8.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/9.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/10.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/11.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/12.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/13.jpg")
        },
        {
          banner_image: require("~/assets/image/tryHead/14.jpg")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/1.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/2.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/3.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/4.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/5.png")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/6.jpg")
        },
        {
          banner_image: require("~/assets/image/tryChildHead/7.jpg")
        }
      ]
    };
  },
  methods: {
    ...mapMutations('content', ['SET_FAVOURITESNUM']),
    /**
     *@param: 
     *@description: 添加轮播头像图片
     *@author: Mister Wang
     *@date: 2021-03-11 15:36:51
    */
    addHeaderPic (obj) {
      console.log('addHeaderPic :>> ', obj);
      // this.bannerImgList = this.bannerImgList.concat(obj)
      // console.log('bannerImgList :>> ', this.bannerImgList);
    },
    /**
     *@param:
     *@description: 显示试戴弹窗
     *@author: Mister Wang
     *@date: 2021-03-04 09:28:03
     */
    showTry(bol) {
      this.dialogTry = bol;
    },
    switchTap(swiper) {
      let index = parseInt(swiper.path[0].dataset["index"] - 1);
      let isEle = swiper.path[4].dataset["box"];
      if (index !== 0 && !index) return;
      if (isEle) {
        let parentEle = swiper.path[4];
        const liImg = parentEle.querySelectorAll(".liImg");
        const liRadio = parentEle.querySelectorAll(".liRadio");
        for (let i = 0; i < liImg.length; i++) {
          liImg[i].classList.remove("productActive");
          liRadio[i].classList.remove("optionAcitve");
        }
        liImg[index].classList.add("productActive");
        liRadio[index].classList.add("optionAcitve");
      }
    },
    addFavorite(swiper) {
      let isEle = swiper.path[4].dataset["box"];
      if (isEle) {
        let item = swiper.path[4].dataset["item"];
        let sid = "1232131";
        // getCaptcha({ sid: sid }).then((res) => {
        //   let msg = "Add to wishlist accessfully!";
        //   let num = this.$store.state.content.favouritesNum;
        //   this.$store.commit("content/SET_FAVOURITESNUM", parseInt(num + 1));
        //   Message.success({
        //     message: msg,
        //   });
        // });
      }
    },
  },
  components: {
    DetailSwiper,
    Detail,
    RecommendProductSwiper,
    TryOn
  },
  head() {
    return {
      title: this.$t('home.title'),
      meta: [
        { hid: 'keywords', name: 'keywords', content: '森德贸易进出口公司' },
        { hid: 'description', name: 'description', content: '森德贸易进出口公司' }
      ]
    }
  }  
};
</script>

<style lang="scss" scoped>

</style>